<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/table.css">
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="js/table.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <div id="table">
    </div>

    <button type="button" id="editBtn">编辑</button>
    <button type="button" id="saveBtn">保存</button>
    <button type="button" id="cancelBtn">取消</button>
    <script type="text/javascript">
    var table = $("#table").jqTable({
        dataList: [{
            id:"a1",
            name: "test",
            age: "123",
            birthday: "2013-2-01"
        },{
            id:"a2",
            name: "test11",
            age: "1231",
            birthday: "2013-2-011"
        }],
        dataId:"id",
        cols: [{
            type:"checkbox"
        },{
            name: "name",
            title: "名称"
        }, {
            name: "age",
            title: "年龄"
        }, {
            name: "birthday",
            title: "生日"
        }, {
            title: "操作1",
            type: "button",
            btns: [{
                title: "显示",
                callback: function(e) {
                    var data = e.data;
                	console.log(data);
                }
            }]
        }, {
            title: "操作2",
            type: "button",
            btns: [{
            	title: "删除",
                callback: function(e) {
                    var data = e.data;
                	console.log(data);
                }
            }]
        }]
    });
    $("#saveBtn").click(function(){
        console.log(table.saveEditDatas());
    });
    $("#cancelBtn").click(function(){
        table.cancleEdit();
    });
    $("#editBtn").click(function(){
        table.editRows();
    });
    </script>
</body>

</html>
